<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Processing Example</title>
<script src="processing-1.3.6.min.js"></script>
<script type="application/processing" data-processing-target="example">
// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.
PImage bigImage;
float[] bx = new float[10];
float[] by = new float[10];
int bs = 4;
boolean[] bover = new boolean[10];
boolean[] locked = new boolean[10];
for (int i=0; i<10; i++){
	bover[i] = false;
	locked[i] = false;	
}
float[] bdifx = new float[10]; 
float[] bdify = new float[10]; 
for (int i=0; i<10; i++){
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
}

void setup() 
{

  //background_image = requestImage("http://students.cec.wustl.edu/~bc17/img/amos/20060308_120000.jpg");
  bigImage = requestImage(jsImage);
  size(352, 240);

  for (int i=0; i<10; i++) { 
  	bx[i] = 0.0;
  	by[i] = 0.0;
  }
  ellipseMode(CENTER_RADIUS);  
}

void updateSelf() 
{
	for (int i=0; i<10; i++) {
		bx[i] = jsx[i];
		by[i] = jsy[i];
	}
}

void removePoint(int idx) 
{
	bx[idx] = 0.0;
	by[idx] = 0.0;
	//bdifx[idx] = 0.0;
	//bdify[idx] = 0.0;
	free[idx] = 1;
	jsx[idx] = 0;
	jsy[idx] = 0;
	bover[idx] = false;
}

void draw() 
{ 
  //updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  
  // Test if the cursor is over any ellipse
  for (int i=0; i<10; i++) {
	  if (free[i] == 0) {
		  if (mouseX > bx[i]-bs && mouseX < bx[i]+bs && 
			  mouseY > by[i]-bs && mouseY < by[i]+bs) {
			bover[i] = true;  
			if(!locked[i]) { 
			  stroke(0); 
			  //colorMode(RGB,255);
			  fill(255 - i*20,i*100%255,i*30%255);
			} 
		  } else {
			stroke(255);
			//colorMode(RGB,255);
			fill(255 - i*20,i*100%255,i*30%255);
			bover[i] = false;
		  }
		  
		  // drawing our shapes
		  ellipse(bx[i], by[i], bs, bs);
	  }

  }

}

void mousePressed() {
  boolean new_point = true;
  for (int i=0; i<10; i++) {
	  if(bover[i]) { 
	  	new_point = false;
	  	if (mouseButton == LEFT) {
			locked[i] = true;
			fill(255 - i*20,i*100%255,i*30%255);
		}
		else {
			removePoint(i);
		}
	  } else {
		locked[i] = false;
	  }
	
	  bdifx[i] = mouseX-bx[i]; 
	  bdify[i] = mouseY-by[i];
  }
  if (new_point == true && mouseButton == LEFT) {
  	idx = getFreeIdx();
	bx[idx] = mouseX;
	by[idx] = mouseY;
	free[idx] = 0;
  }
}



void mouseDragged() {
  for (int i=0; i<10; i++) {
	  if(locked[i]) {
		bx[i] = mouseX-bdifx[i]; 
		by[i] = mouseY-bdify[i]; 
	  }
  }
  	  // updating js vars
	  updateJS();
}

void mouseReleased() {
  for (int i=0; i<10; i++) {
  	locked[i] = false;
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
  }
  updateJS();
}

void updateJS() {
  for (int i=0; i<10; i++) {
  	jsx[i] = bx[i];
	jsy[i] = by[i];
  }
}

void getFreeIdx() {
	for (int i=0; i<10; i++) {
		if (free[i] == 1) {
			return i;
		}
	}
}

</script>

<script language="JavaScript">
//var image = "url(" + decode(gup('url')) + ")";
var jsImage = decode(gup('url'));

var jsx = new Array();
var jsy = new Array();

var free = new Array();

for (i=0; i<10; i++) {
	jsx[i] = 0;
	jsy[i] = 0;
	free[i] = 1;
}

function update(){
	for (i=0; i<10; i++) {
		x = jsx[i];
		y = jsy[i];
		document.getElementById("tag"+(i+1)).value = "" + x + "," + y;
		//document.getElementById("tag"+(i+1)).style.visibility = "visible";
		//document.getElementById("remove"+(i+1)).style.visibility = "visible";
	}

}

function reset(){
	for (i=0; i<10; i++) {
		jsx[i] = 0;
		jsy[i] = 0;
		free[i] = 1;
	}
	update();
}

//
// This method Gets URL Parameters (GUP)
//
function gup( name )
{
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var tmpURL = window.location.href;
  var results = regex.exec( tmpURL );
  if( results == null )
    return "";
  else
    return results[1];
}

//
// This method decodes the query parameters that were URL-encoded
//
function decode(strToDecode)
{
  var encoded = strToDecode;
  return unescape(encoded.replace(/\+/g,  " "));
}
</script>

</head>
<body>
<form id="mturk_form" name="mturk_form" method="POST" action="http://www.mturk.com/mturk/externalSubmit">
<input type="hidden" id="assignmentId" name="assignmentId" value="">

<h1>Put Dots on People</h1>
<p>
<ul>
<li>Left click to place a dot on a person.</li>
<li>Try your best to place the dot at the center of a person.</li>
<li>Right click a dot to remove it.</li>
<li>You can drag already placed dots around.</li>
</ul>
<canvas id="example" onclick="javascript:update()" onmousemove="javascript:update()"> </canvas>
<button type="button" id="reset" style="visibility:hidden" onClick="javascript:reset()">Reset</button><br />

<div style="clear:right">
<input type="text" id="tag1" name="tag1" size="8" style="visibility:hidden"><button type="button" id="remove1" style="visibility:hidden" onClick="javascript:removeTag('1')">Remove</button><br />
<input type="text" id="tag2" name="tag2" size="8" style="visibility:hidden"><button type="button" id="remove2" style="visibility:hidden" onClick="javascript:removeTag('2')">Remove</button><br />
<input type="text" id="tag3" name="tag3" size="8" style="visibility:hidden"><button type="button" id="remove3" style="visibility:hidden" onClick="javascript:removeTag('3')">Remove</button><br />
<input type="text" id="tag4" name="tag4" size="8" style="visibility:hidden"><button type="button" id="remove4" style="visibility:hidden" onClick="javascript:removeTag('4')">Remove</button><br />
<input type="text" id="tag5" name="tag5" size="8" style="visibility:hidden"><button type="button" id="remove5" style="visibility:hidden" onClick="javascript:removeTag('5')">Remove</button><br />
<input type="text" id="tag6" name="tag6" size="8" style="visibility:hidden"><button type="button" id="remove6" style="visibility:hidden" onClick="javascript:removeTag('6')">Remove</button><br />
<input type="text" id="tag7" name="tag7" size="8" style="visibility:hidden"><button type="button" id="remove7" style="visibility:hidden" onClick="javascript:removeTag('7')">Remove</button><br />
<input type="text" id="tag8" name="tag8" size="8" style="visibility:hidden"><button type="button" id="remove8" style="visibility:hidden" onClick="javascript:removeTag('8')">Remove</button><br />
<input type="text" id="tag9" name="tag9" size="8" style="visibility:hidden"><button type="button" id="remove9" style="visibility:hidden" onClick="javascript:removeTag('9')">Remove</button><br />
<input type="text" id="tag10" name="tag10" size="8" style="visibility:hidden"><button type="button" id="remove10" style="visibility:hidden" onClick="javascript:removeTag('10')">Remove</button><br />
</div>
<p>
<input id="submitButton" type="submit" name="Submit" value="Submit HIT">
<p>
</form>
<script language="Javascript">
	//new_image = "url(" + decode(gup('url')) + ")";
    //
    // Check if the worker is PREVIEWING the HIT or if they've ACCEPTED the HIT
    //
    if (gup('assignmentId') == "ASSIGNMENT_ID_NOT_AVAILABLE")
    {
  // If we're previewing, disable the button and give it a helpful message
  document.getElementById('submitButton').disabled = true;
  document.getElementById('submitButton').value = "You must ACCEPT the HIT before you can submit the results.";
    } else {
        var form = document.getElementById('mturk_form');
        if (document.referrer && ( document.referrer.indexOf('workersandbox') != -1) ) {
            form.action = "http://workersandbox.mturk.com/mturk/externalSubmit";
        }
    }

</script>

</body>
</html>
